<template>
  <div class='echartstwo' :style="{height:fullHeights+'px'}">
    <div id="echarts_two" :style="{height:fullHeight+'px'}"></div>
  </div>
</template>
<script>
  module.exports = {
    name: "echarts_two",
    data() {
      return {
        fullHeight: document.documentElement.clientHeight - 260,
        fullHeights: document.documentElement.clientHeight - 168,
        mileagelist: [],
        roadlevellist: [],
        legendlist: [],
        legendcount: [],
        onelegendcount: [],
        twolegendcount: []
      }
    },
    mounted() {
      this.echartsdata();
    },
    methods: {
      get(url, params) {
        return new Promise((resolve, reject) => {
          axios.get('./js/echarts_two.json')
            .then(response => {
              resolve(response);
            })
            .catch(err => {
              reject(err);
            })
        })
      },
      async echartsdata() {
        let myChart = echarts.init(document.getElementById('echarts_two'));
        let datas = await this.get();
        this.mileagelist = datas.data;
        this.mileagelist.pop();
        this.mileagelist.forEach((v, i) => {
          this.roadlevellist.push(v['公路等级']);
          this.onelegendcount.push(v['水泥混凝土']);
          this.twolegendcount.push(v['沥青混凝土']);
        })
        this.legendcount[0] = this.onelegendcount;
        this.legendcount[1] = this.twolegendcount;
        for (let key in this.mileagelist[0]) {
          this.legendlist.push(key)
        }
        this.legendlist = this.legendlist.slice(1, 3);
        var data = {
          area: this.roadlevellist,
          legend: this.legendlist,
          data: this.legendcount
        }
        var colors = ['rgba(24,144,255,.6)', 'rgba(0,165,71,.6)']
        var option = {
          color: colors,
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove',
            formatter: function(o) {
              return o.seriesName + ' - ' + o.value + '公里'
            }
          },
          legend: {
            icon: "circle",
            top: 0,
            right: 0,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              fontSize: 14,
              color: '#fff',
              padding: [2, 20, 0, 0]
            },
            data: data.legend
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              color: '#E9E9E9'
            },
            axisLine: {
              lineStyle: {
                color: '#E9E9E9'
              },
              width: 5
            },
            axisTick: {
              show: false,
            },
            data: data.area
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: '#E9E9E9'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: '#E9E9E9',
                type: 'doshed'
              }
            }
          },
          series: []
        };
        for (var i = 0; i < data.legend.length; i++) {
          option.series.push({
            name: data.legend[i],
            type: 'bar',
            stack: '总量',
            barWidth: '115',
            label: {
              show: false,
              position: 'insideRight'
            },
            data: data.data[i]
          })
        }
        myChart.setOption(option);
        window.onresize = function() {
          myChart.resize();
        }
      }
    }
  }
</script>
